<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>聊天</title>

<!--sdk-->
<script src="static/sdk/strophe.js"></script>
<script src="static/sdk/easemob.im-1.1.1.js"></script>
<script src="static/sdk/easemob.im.shim.js"></script>
<!--兼容老版本(1.0.7含以前版本)sdk需引入此文件-->

<!--config-->
<script src="static/js/easemob.im.config.js"></script>

<!--demo-->
<script src="static/js/jquery-1.11.1.js"></script>
<script src="static/js/bootstrap.js"></script>
<link rel="stylesheet" href="static/css/bootstrap.css" />
</head>
<style>
.chat-title {
	background-color: #00BFF7;
	top: 0;
	height: 40px;
	position: fixed;
	padding-top: 6px;
	width: 100%;
}

.chat-content {
	margin-top: 50px;
	margin-bottom: 60px;
	/* height: 80%; */
	width: 100%;
	overflow: hidden;
}

.chat-input {
	background-color: #ddd;
	position: fixed;
	bottom: 0;
	height: 40px;
	width: 100%;
	/* 	padding-top: 6px; */
}

.load-input {
	height: 140px;
}

.content-right {
	clear: both;
	text-align: right;
	margin-top: 15px;
}

.content-right-content {
	padding: 8px 14px 13px 0;
	font-size: 20px;
	line-height: 28px;
	margin-right: 62px;
}

.content-right-content-content {
	max-width: 180px;
	float: right;
	text-align: left;
	background-color: #d2e0e3;
	word-break: break-all;
	padding: 9px 15px 4px 15px;
	min-height: 36px;
	border-radius: 10px;
}

.content-right-header {
	margin: 5px 15px 5px 0;
	width: 50px;
	height: 50px;
	float: right;
}

.content-left {
	clear: both;
	text-align: left;
	margin-top: 15px;
}

.content-left-header {
	margin: 5px 0 5px 15px;
	width: 50px;
	height: 50px;
	float: left;
}

.content-left-content {
	padding: 10px 0 13px 14px;
	font-size: 20px;
	line-height: 28px;
	margin-left: 62px;
}

.content-left-content-content {
	max-width: 180px;
	float: left;
	background-color: #d2e0e3;
	margin-left: -1px;
	word-break: break-all;
	padding: 9px 15px 4px 15px;
	min-height: 36px;
	border-radius: 10px;
}
</style>
<body style="margin: 0; padding: 0; -webkit-user-select: none; user-select: none;">
	<div class="chat-title">
		<div style="text-align: center; color: #fff; margin-top: 6px;">
			<span id="chat_title" class="talkTo" style="font-size: 28px;"></span>
		</div>
	</div>
	<div class="chat-content">
		<!-- 		<div class="content-right"> -->
		<!-- 			<img class="content-right-header" src="static/img/head/header2.jpg" /> -->
		<!-- 			<div class="content-right-content"> -->
		<!-- 				<img src="static/img/triangle-right.png" style="float: right; margin-top: 13px;"> -->
		<!-- 				<div class="content-right-content-content"> -->
		<!-- 					<span> sda阿斯顿发阿斯顿发阿斯顿发阿斯顿发大师傅阿斯顿发是打发撒旦法撒旦法撒旦法大师傅 </span> -->
		<!-- 				</div> -->
		<!-- 			</div> -->
		<!-- 			<div style="clear: both;"></div> -->
		<!-- 		</div> -->
		<!-- 		<div class="content-left"> -->
		<!-- 			<img class="content-left-header" src="static/img/head/header2.jpg" /> -->
		<!-- 			<div class="content-left-content"> -->
		<!-- 				<img src="static/img/triangle-left.png" style="float: left; margin-top: 13px;"> -->
		<!-- 				<div class="content-left-content-content"> -->
		<!-- 					<span> asd阿斯顿发按时打发第三方大师傅阿斯顿发大法师打发大点发的发打发打发打发阿道夫 </span> -->
		<!-- 				</div> -->
		<!-- 			</div> -->
		<!-- 			<div style="clear: both;"></div> -->
		<!-- 		</div> -->
	</div>
	<div class="chat-input">
		<div class="chat-input-send" style="height: 40px;">
			<img src="static/img/icon_down.png" style="width: 10%; margin-left: 15px; margin-top: -20px; margin-bottom: -3px;" onclick="show_load(1)" /> <input id="talkInputId" type="text" class="form-control" style="height: 20px; width: 50%; margin-top: 5px; margin-bottom: 20px;" />
			<button class="btn btn_default" style="float: right; margin-right: 4%; height: 29px; margin-top: 5px; margin-bottom: 20px;" onclick="sendText()">发&nbsp;送</button>
		</div>
		<div class="chat-input-load" style="display: none; margin-top: -2px;">
			<button type="button" class="btn btn-lg" style="height: 35px; margin: 5px 4% 4px 4%; width: 92%;" onclick="show_load(2)">
				<img src="static/img/icon_up.png" style="width: 28px; margin-top: -2px;" />
			</button>
			<div style="clear: both;"></div>
			<div style="text-align: center;">
				<a href="static/img/iso.png" download="aibili-iso.png"><img src="static/img/iso.png" style="width: 80px; height: 80px;" /></a> <a href="static/img/android.png" download="aibili-android.png"><img src="static/img/iso.png" style="width: 80px; height: 80px; margin-left: 35px;" /></a>
			</div>
		</div>
	</div>
</body>
<script src="static/js/newtest.js"></script>
<script>
$(function() {
	var all_height = document.body.clientHeight;
	var title_height = $('.chat-title').height();
	var bottom_height = $('.chat-input').height();
	var content_height = all_height - title_height - bottom_height;
	$('#chat-content').css('height', content_height + 'px'); 
	console.log($('.chat-content').height());
});

function show_load(index) {
	if (index == 1) {
		$('.chat-input').addClass('load-input');
	    $('.chat-input-send').css('display', 'none');
	    $('.chat-input-load').css('display', 'block');
	} else {
		$('.chat-input').removeClass('load-input');
	    $('.chat-input-send').css('display', 'block');
	    $('.chat-input-load').css('display', 'none');
	}
}
</script>
</html>